/*
 * @Author: 鱿鱼溪学院
 * @Date: 2024-10-25 01:20:33
 * @LastEditTime: 2024-10-27 01:22:29
 * @LastEditors: 鱿鱼溪学院
 * @Description:
 * @FilePath: \yyx-play\src\components\video\index.ts
 * Copyright 鱿鱼溪学院 by edu v1.0
 * 天道酬勤
 */
import { type App } from "vue";
// import styles from "./video.css";
// import styles from "./video.css.d";

interface Ivideo {
  url: string;
  elem: string | HTMLElement;
  width?: string;
  height?: string;
  autoplay: boolean;
}

interface Icomponent {
  tempContainer: HTMLElement;
  init: () => void;
  template: () => void;
  handle: () => void;
}

function video(options: Ivideo) {
  return new Video(options);
}

class Video implements Icomponent {
  tempContainer: any;
  constructor(private settings: Ivideo) {
    this.settings = Object.assign(
      {
        width: "100%",
        height: "100%",
        autoplay: false,
      },
      this.settings
    );
    this.init();
  }

  //初始化
  init() {
    this.template();
  }

  //创建模版
  template() {
    this.tempContainer = document.createElement("div");
    // this.tempContainer.className = styles;
    this.tempContainer.style.width = this.settings.width;
    this.tempContainer.style.height = this.settings.height;
    this.tempContainer.innerHTML = `<video class="${"video-content"}" src="${
      this.settings.url
    }"> <div class="video-controls"></div>`;
    // this.tempContainer.
  }
  //事件
  handle() {}
}

export default {
  install(app: App, options: any) {
    const v = video(options);
    console.log(v);
  },
};
